<template>
  <div>
    <div class="no-content" v-if="Exam !== 1">您还没有权限访问</div>
    <div v-else>
      <tab :tabs="tablist" activeName="feedback"></tab>
      <div class="textarea_box">
        <textarea v-model="feedtext" placeholder="请在此处写下您对我们产品的建议" rows="10" maxlength="250"></textarea>
      </div>
      <span class="word_num">{{textLen}}/<em>250</em></span>
      <el-button type="primary" :disabled="textLen === 0 " class="submitBtn" @click="submitFeed">确定</el-button>
      <br clear="both" />
    </div>
  </div>
</template>
<script>
  import {tab} from '@/components/index'
  import {Input, Button} from 'element-ui'
  import {postFeedback} from '@/service/get-data'
  import {getCookie} from '@/config/mUntils'

  export default{
    components: {
      tab,
      elInput: Input,
      elButton: Button
    },
    data () {
      return {
        tablist: [{name: 'feedback', text: '意见反馈'}],
        feedtext: ''
      }
    },
    computed: {
      textLen () {
        return this.feedtext.length
      },
      Exam () {
        return getCookie('Exam') - 0
      }
    },
    methods: {
      async submitFeed () {
        let res = await postFeedback(this.feedtext)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.$message({
            message: '反馈提交成功,刀具联盟感谢你的支持',
            duration: 2000,
            type: 'success'
          })
          this.feedtext = ''
        } else {
          this.$message({
            message: res.data.resultMsg,
            duration: 2000,
            type: 'error'
          })
          this.feedtext = ''
        }
      }
    },
    watch: {
      feedtext (newval, oldval) {
        if (newval.length >= 250) {
          if (oldval !== 250) {
            this.$message({
              message: '字数最多250个',
              type: 'danger'
            })
          }
          this.feedtext = this.feedtext.substring(0, 250)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .textarea_box{
    margin-top: 30px;
    textarea {
      box-sizing: border-box;
      width: 100%;
      outline: none;
      padding: 24px;
      background: #F9F9F9;
      border: 1px solid #DDDDDD;
      box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.17);
      border-radius: 2px;
    }
  }
  .submitBtn{
    float: right;
    width: 120px;
    margin-top: 30px;
    color: #444444;
  }
  .word_num{
    margin-top:10px;
    font-size: 14px;
    color: #999999;
    line-height: 30px;
    em{
      color: #2A2A2A;
    }
  }

</style>

